<!DOCTYPE html>
<html
  prefix="
    xhv: http://www.w3.org/1999/xhtml/vocab#
    xsd: http://www.w3.org/2001/XMLSchema#
    rdfs: http://www.w3.org/2000/01/rdf-schema#
    dc: http://purl.org/dc/terms/
    vcard: http://www.w3.org/2006/vcard/ns#
    v: http://rdf.data-vocabulary.org/#"
  lang="en" >
  <head>
    <title>JSON-LD Development Playground</title>

    <!-- Meta Tags -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <!-- Style Sheets -->
    <link rel="stylesheet" type="text/css" href="../../static/css/bootstrap/bootstrap.css">

    <!-- CodeMirror -->
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/g/bootstrap@2.3.1(css/bootstrap-responsive.min.css),codemirror@3.22.0(codemirror.css+addon/lint/lint.css+addon/hint/show-hint.css+theme/neat.css)">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/fontawesome/3.2.1/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../playground.css">
    <link rel="stylesheet" type="text/css" href="../jsonld-vis.css">
    <link rel="stylesheet" type="text/css" href="../../static/css/rdf-font/rdf-font.css">

    <link rel="shortcut icon" href="../../favicon.ico" />
  </head>

  <body id="page-playground" onload="playground.init();">
    <div class="navbar navbar-static-top">
      <div class="navbar-inner">
        <div class="row-fluid">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="../../"><img src="../../images/json-ld-data-24.png" alt="JSON-LD logo"> JSON-LD</a>
          <div class="nav-collapse">
          <ul class="nav">
            <li class="active">
              <a href="../../playground/"><span class="icon-beer"></span> Playground</a>
            </li>
            <li>
              <a href="../../learn/"><span class="icon-book"></span> Documentation</a>
            </li>
            <li><a href="../../#developers"><span class="icon-beaker"></span> Developers</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="icon-folder-open"></span> Specifications <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                  <li class="nav-header"><strong>W3C Recommendations</strong></li>
                  <li><a href="https://www.w3.org/TR/json-ld/">Syntax</a></li>
                  <li><a href="https://www.w3.org/TR/json-ld-api/">Processing Algorithms and API</a></li>
                  <li><a href="https://www.w3.org/TR/json-ld-framing/">Framing</a></li>
                  <li class="divider"></li>
                  <li class="nav-header"><strong>Latest Drafts</strong></li>
                  <li><a href="https://w3c.github.io/json-ld-syntax/">Syntax</a></li>
                  <li><a href="https://w3c.github.io/json-ld-api/">Processing Algorithms and API</a></li>
                  <li><a href="https://w3c.github.io/json-ld-framing/">Framing</a></li>
                  <li><a href="https://w3c.github.io/json-ld-bp/">Best Practices</a></li>
                  <li><a href="https://w3c.github.io/json-ld-streaming/">Streaming</a></li>
                  <li><a href="https://json-ld.github.io/json-ld-star/">JSON-LD-star</a></li>
                  <li><a href="https://w3c.github.io/json-ld-cbor/">CBOR</a></li>
                  <li><a href="https://github.com/w3c/json-ld-rc/">Recommended Context</a></li>
                  <li><a href="https://json-ld.github.io/yaml-ld/">YAML-LD</a></li>
                  <li><a href="/spec/">1.0 drafts (historic)</a></li>
              </ul>
            </li>
            <li><a href="../../images/"><span class="icon-picture"></span> Branding</a></li>
            </ul>
          </div>
          <!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">
      <h2>JSON-LD Development Playground</h2>
      <p>
        Play around with JSON-LD markup by typing out some JSON below and
        seeing what gets generated from it at the bottom of the page. Pick any
        of the examples below to get started.
      </p>
      <div class="alert alert-warning">
        <strong>NOTE</strong>: This is a <strong>development</strong> site for
        testing new playground and <a href="https://github.com/digitalbazaar/jsonld.js">jsonld.js</a>
        features. The <strong>standard</strong> version is located <a href="../">here</a>.
      </div>
    </div>

    <div class="loading hero">
      <h1><i class="icon-spinner icon-spin icon-large"></i> Loading the Playground...</h1>
    </div>
    <div class="loaded hide">
      <div class="container">
        <div class="btn-group" data-toggle="buttons-radio">
          <button class="btn disabled btn-primary">Examples:</button>
          <button id="btn-person" class="btn button">
            <i class="icon icon-user"></i>
            <span>Person</span>
          </button>
          <button id="btn-event" class="btn button">
            <i class="icon icon-calendar"></i>
            <span>Event</span>
          </button>
          <button id="btn-place" class="btn button">
            <i class="icon icon-map-marker"></i>
            <span>Place</span>
          </button>
          <button id="btn-product" class="btn button">
            <i class="icon icon-barcode"></i>
            <span>Product</span>
          </button>
          <button id="btn-recipe" class="btn button">
            <i class="icon icon-food"></i>
            <span>Recipe</span>
          </button>
          <button id="btn-library" class="btn button">
            <i class="icon icon-book"></i>
            <span>Library</span>
          </button>
          <button id="btn-activity" class="btn button">
            <i class="icon icon-comment"></i>
            <span>Activity</span>
          </button>
        </div>

        <div class="pull-right">
          <a class="btn hide" id="permalink">
            <i class="icon icon-link"></i>
            <span>Permalink</span>
          </a>
          <a class="btn" id="gist">
            <i class="icon icon-github"></i>
            <span>Gist</span>
          </a>
          <button class="btn popover-info" title="Keyboard shortcuts">
            <i class="icon icon-keyboard"></i> Shortcuts
          </button>
          <div class="popover-info-content hide">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>Key</th>
                  <th>Autocomplete</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><label class="label">@</label></td>
                  <td>all of the <b>@</b> keywords</td>
                </tr>
                <tr>
                  <td><label class="label">Ctrl+Space</label></td>
                  <td>available keys in <b>@context</b></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div class="container" id="markup-container">
          <div class="row">
            <div id="markup-div" class="span12">
              <div class="pull-right editor-options">
                <div class="input-prepend editor-option" title="Use remote document" data-editor="markup">
                  <button class="btn" type="button" data-toggle="button">
                    <span class="icon-stack">
                      <i class="icon-cloud icon-stack-base icon-muted"></i>
                      <i class="icon-file"></i>
                    </span>
                  </button>
                  <input class="span2" type="text" placeholder="Document URL"/>
                </div>
              </div>
              <h3>JSON-LD Input</h3>
              <textarea id="markup" class="compressed process span6 codemirror-input"
              placeholder="Enter your JSON-LD markup here..." rows="10"></textarea>
            </div>

            <div id="context-div" class="span6">
              <div class="pull-right editor-options">
                <div class="input-prepend editor-option" title="Use remote context" data-editor="context">
                  <button class="btn" type="button" data-toggle="button">
                    <span class="icon-stack">
                      <i class="icon-cloud icon-stack-base icon-muted"></i>
                      <i class="icon-bullseye"></i>
                    </span>
                  </button>
                  <input class="span2" type="text" placeholder="Context URL"/>
                </div>
              </div>
              <h3>New JSON-LD Context</h3>
              <button class="btn" data-toggle="button" id="copy-context" title='Copy context from "JSON-LD Input"'>
                <i class="icon-circle-arrow-right"></i>
              </button>

              <textarea id="context" class="compressed process span6 codemirror-input"
              placeholder="Enter the new JSON-LD context to compact to here..." rows="10">{}</textarea>
            </div>

            <div id="frame-div" class="span6">
              <h3>
                JSON-LD Frame
                <div class="pull-right editor-options">
                  <div class="input-prepend editor-option" title="Use remote frame" data-editor="frame">
                    <button class="btn" type="button" data-toggle="button">
                      <span class="icon-stack">
                        <i class="icon-cloud icon-stack-base icon-muted"></i>
                        <i class="icon-crop"></i>
                      </span>
                    </button>
                    <input class="span2" type="text" placeholder="Frame URL" />
                  </div>
                </div>
              </h3>
              <textarea id="frame" class="compressed process span6 codemirror-input"
              placeholder="Enter your JSON-LD frame here..." rows="10">{}</textarea>
            </div>

            <div id="privatekey-rsa-div" class="span6">
              <h3>
                PEM-encoded Private Key
                <div class="pull-right editor-options">
                  <div class="input-prepend editor-option" title="Use remote private key" data-editor="privatekey-rsa">
                    <button class="btn" type="button" data-toggle="button">
                      <span class="icon-stack">
                        <i class="icon-cloud icon-stack-base icon-muted"></i>
                        <i class="icon-crop"></i>
                      </span>
                    </button>
                    <input class="span2" type="text" placeholder="Private Key URL" />
                  </div>
                </div>
              </h3>
              <textarea id="privatekey-rsa" class="compressed process span6 codemirror-input"
              placeholder="Enter your PEM-encoded private key here..." rows="10">
-----BEGIN RSA PRIVATE KEY-----
MIICWwIBAAKBgQC4R1AmYYyE47FMZgo708NhFU+t+VWn133PYGt/WYmD5BnKj679
YiUmyrC3hX6oZfo4eVpOkycxZvGgXCLQGuDp45XfZkdsjqs3o62En4YjlHWxgeGm
kiRqGfZ3sJ3u5WZ2xwapdZY3/2T/oOV5ri8SktTvmVGCyhwFuJC/NbJMEwIDAQAB
AoGAZXNdPMQXiFGSGm1S1P0QYzJIW48ZCP4p1TFP/RxeCK5bRJk1zWlq6qBMCb0E
rdD2oICupvN8cEYsYAxZXhhuGWZ60vggbqTTa+4LXB+SGCbKMX711ZoQHdY7rnaF
b/Udf4wTLD1yAslx1TrHkV56OfuJcEdWC7JWqyNXQoxedwECQQDZvcEmBT/Sol/S
AT5ZSsgXm6xCrEl4K26Vyw3M5UShRSlgk12gfqqSpdeP5Z7jdV/t5+vD89OJVfaa
Tw4h9BibAkEA2Khe03oYQzqP1V4YyV3QeC4yl5fCBr8HRyOMC4qHHKQqBp2VDUyu
RBJhTqqf1ErzUBkXseawNxtyuPmPrMSl6QJAQOgfu4W1EMT2a1OTkmqIWwE8yGMz
Q28u99gftQRjAO/s9az4K++WSUDGkU6RnpxOjEymKzNzy2ykpjsKq3RoIQJAA+XL
huxsYVE9Yy5FLeI1LORP3rBJOkvXeq0mCNMeKSK+6s2M7+dQP0NBYuPo6i3LAMbi
yT2IMAWbY76Bmi8TeQJAfdLJGwiDNIhTVYHxvDz79ANzgRAd1kPKPddJZ/w7Gfhm
8Mezti8HCizDxPb+H8HlJMSkfoHx1veWkdLaPWRFrA==
-----END RSA PRIVATE KEY-----
              </textarea>
            </div>

            <div id="privatekey-koblitz-div" class="span6">
              <h3>Bitcoin (ECDSA Koblitz) Private Key for Signing</h3>
              <textarea id="privatekey-koblitz" class="compressed process span6 codemirror-input"
                placeholder="Enter your Bitcoin (Koblitz) private key here..." rows="3">L4mEi7eEdTNNFQEWaa7JhUKAbtHdVvByGAqvpJKC53mfiqunjBjw</textarea>

              <h3>Bitcoin (ECDSA Koblitz) Public Key for Verification</h3>
              <textarea id="publickey-koblitz" class="compressed process span6 codemirror-input"
                placeholder="Enter your Bitcoin (Koblitz) public key here..." rows="3">1LGpGhGK8whX23ZNdxrgtjKrek9rP4xWER</textarea>

              <div class="koblitz-verification"></div>
            </div>


          </div>
        </div>

        <div id="markup-errors" class="hide alert alert-error"></div>
        <div id="param-errors" class="hide alert alert-error"></div>
        <div id="validation-errors" class="hide alert alert-error"></div>
        <div id="validation-message" class="hide alert alert-success"></div>
        <div id="using-context-map" class="hide alert alert-note">
          <p>NOTE: A remote context that is not known to be fully working yet was detected in your input.
            If you wish, you can use an alternative context created by the JSON-LD community to
            process your document nevertheless.</p>
          <label class="checkbox">
            <input type="checkbox" id="use-context-map" value="1"> Use development context
          </label>
          <table class="table table-condensed">
            <thead>
              <tr>
                <td>Original</td>
                <td>Development</td>
              </tr>
            </thead>
            <tbody>
              <!-- dynamic rows -->
            </tbody>
          </table>
        </div>
        <div id="processing-errors" class="hide alert alert-error"></div>

        <div id="output-container">
          <ul id="tabs" class="nav nav-tabs">
            <li class="active">
              <a id="tab-expanded" href="#pane-expanded" data-toggle="tab" name="tab-expanded">
                <i class="icon-resize-full"></i>
                <span>Expanded</span>
              </a>
            </li>
            <li>
              <a id="tab-compacted" href="#pane-compacted" data-toggle="tab" name="tab-compacted">
                <i class="icon-resize-small"></i>
                <span>Compacted</span>
              </a>
            </li>
            <li>
              <a id="tab-flattened" href="#pane-flattened" data-toggle="tab" name="tab-flattened">
                <i class="icon-reorder"></i>
                <span>Flattened</span>
              </a>
            </li>
            <li>
              <a id="tab-framed" href="#pane-framed" data-toggle="tab" name="tab-framed">
                <i class="icon-crop"></i>
                <span>Framed</span>
              </a>
            </li>
            <li>
              <a id="tab-nquads" href="#pane-nquads" data-toggle="tab" name="tab-nquads">
                <i class="rdf-icon-rdf"></i>
                <span>N-Quads</span>
              </a>
            </li>
            <li>
              <a id="tab-normalized" href="#pane-normalized" data-toggle="tab" name="tab-normalized">
                <i class="icon-archive"></i>
                <span>Normalized</span>
              </a>
            </li>
            <li>
              <a id="tab-table" href="#pane-table" data-toggle="tab" name="tab-table">
                <i class="icon-th"></i>
                <span>Table</span>
              </a>
            </li>
            <li>
              <a id="tab-visualized" href="#pane-visualized" data-toggle="tab" name="tab-visualized">
                <i class="icon-eye-open"></i>
                <span>Visualized</span>
              </a>
            </li>
            <!--
            <li>
              <a id="tab-signed-rsa" href="#pane-signed-rsa" data-toggle="tab" name="tab-signed-rsa">
                <i class="icon-pencil"></i>
                <span>Signed with RSA</span>
              </a>
            </li>
            <li>
              <a id="tab-signed-koblitz" href="#pane-signed-koblitz" data-toggle="tab" name="tab-signed-koblitz">
                <i class="icon-pencil"></i>
                <span>Signed with Bitcoin</span>
              </a>
            </li>
            -->
          </ul>

          <div class="tab-content">
            <div id="pane-expanded" class="tab-pane active">
              <textarea id="expanded" class="codemirror-output"></textarea>
            </div>
            <div id="pane-compacted" class="tab-pane">
              <textarea id="compacted" class="codemirror-output"></textarea>
            </div>
            <div id="pane-flattened" class="tab-pane">
              <textarea id="flattened" class="codemirror-output"></textarea>
            </div>
            <div id="pane-framed" class="tab-pane">
              <textarea id="framed" class="codemirror-output"></textarea>
            </div>
            <div id="pane-nquads" class="tab-pane">
              <textarea id="nquads" class="codemirror-output"></textarea>
            </div>
            <div id="pane-normalized" class="tab-pane">
              <textarea id="normalized" class="codemirror-output"></textarea>
            </div>
            <div id="pane-table" class="tab-pane">
              <table id="table" class="table table-condensed">
                <thead>
                  <tr>
                    <th>Subject</th>
                    <th>Predicate</th>
                    <th>Object</th>
                    <th>Language</th>
                    <th>Datatype</th>
                    <th>Graph</th>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
            <div id="pane-visualized" class="tab-pane">
              <div id="visualized" style="background: white"></div>
            </div>
            <div id="pane-signed-rsa" class="tab-pane">
              <textarea id="signed-rsa" class="codemirror-output"></textarea>
            </div>
            <div id="pane-signed-koblitz" class="tab-pane">
              <textarea id="signed-koblitz" class="codemirror-output"></textarea>
            </div>
          </div><!-- /.tab-content -->
        </div>

        <hr/>
      </div> <!-- /.container -->
    </div> <!-- /.loading -->

    <div class="container">
      <div id="footer">
        <p id="copyright">
         Website content released under a <a href="http://creativecommons.org/about/cc0">Creative Commons CC0 Public Domain Dedication</a> except where an alternate is specified.
         Part of the <a href="http://payswarm.com/">PaySwarm</a> standardization initiative.
        </p>
      </div>
    </div>

    <!-- sccdn scripts -->
    <script src="https://cdn.jsdelivr.net/g/async@1.5.0,jquery@1.11.0,es6-promise@1.0.0,bootstrap@2.3.2,codemirror@3.22.0(codemirror.min.js+addon/lint/lint.js+addon/edit/matchbrackets.js+addon/edit/closebrackets.js+addon/display/placeholder.js+addon/hint/show-hint.js+mode/ntriples/ntriples.js+mode/javascript/javascript.js)"></script>
    <script src="https://cdn.jsdelivr.net/npm/jsonld@9.0.0/dist/jsonld.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.7/d3-tip.min.js"></script>
    <script src="../jsonld-vis.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jsonld-signatures@2.3.1/dist/jsonld-signatures.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/node-forge@0.8.1/dist/forge.min.js"></script>

    <!-- local scripts -->
    <script src="../bitcore-message.js"></script>
    <script src="../jsonlint.js"></script>
    <script src="../tv4.min.js"></script>
    <script src="../json-schema-lint.js"></script>
    <script src="../jsonld-hint.js"></script>
    <script src="../playground.js"></script>
    <script src="../playground-examples.js"></script>

    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-42886053-1', 'json-ld.org');
      ga('send', 'pageview');
    </script>

    <script type="text/javascript">
      $('#context-div').hide();
      $('#frame-div').hide();
      $('#privatekey-rsa-div').hide();
      $('#privatekey-koblitz-div').hide();
      $('#markup,#context,#frame').bind('keyup', function() {
        $('.btn-group > .btn').each(function () {
          $(this).removeClass('active');
        });
      });
    </script>

  </body>
</html>
